<template>
	<div class="container">
		<el-row>
			<el-col :span="6" :offset="6">
				<el-row class="login">
					<el-col :span="10" class="left">
						<el-row>
							<el-col :span="24" class="logo">
								<img src="../assets/login/logo.png">
							</el-col>
							<el-col :span="24" class="title">
								中华粮网
							</el-col>
							<el-col :span="24" class="address">
								<span>WWW</span>.cngrain.com
							</el-col>
							<el-col :span="24" class="desction">
								<el-row>
									<el-col :span="11" class="desc_left">数据中心</el-col>
									<el-col :span="2" class="back">
										<span></span>
									</el-col>
									<el-col :span="11">系统登录</el-col>
								</el-row>
							</el-col>
							<el-col :span="20" :offset="2" class="line top">

							</el-col>
							<el-col :span="24" class="english">
								<span>DATA</span>
								<span>CENTER</span>
								<span>SYSTEM</span>
								<span>USER</span>
								<span>LOGIN</span>
							</el-col>
							<el-col :span="20" :offset="2" class="line bottom">

							</el-col>
							<el-col :span="24" class="detail">
								从海量数据中获取最有价值的知识和信息
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="13" :offset="1" class="right" v-if="login_type == 'login'">
						<el-row v-if="login_type == 'login'" class="titleRow">
							<el-col :span="6" :offset="1">
								<el-row>
									<el-col :span="24" :class="type == 0 ? 'active' : ''">
										<span @click="type=0">短信登录</span>
									</el-col>
									<el-col :span="6" :offset="5" :class="type == 0 ? 'activeRow' : ''"></el-col>
								</el-row>
							</el-col>
							<el-col :span="6">
								<el-row>
									<el-col :span="24" :class="type == 1 ? 'active' : ''">
										<span @click="type=1">密码登录</span>
									</el-col>
									<el-col :span="6" :offset="5" :class="type == 1 ? 'activeRow' : ''"></el-col>
								</el-row>
							</el-col>
						</el-row>

						<el-row class="inputs">
							<el-col :span="18" :offset="1" v-if="type==0">
								<el-input placeholder="请输入手机号码" class="inputes" v-model="phone">
									<template slot="prepend">
										<span style="font-size: 130%;font-weight: bold;color: #000000;">中国+86</span>
									</template>
								</el-input>
							</el-col>
							<el-col :span="18" :offset="1" v-if="type==1">
								<el-input placeholder="请输入用户名/手机号" class="inputes" v-model="phone">
								</el-input>
							</el-col>
							<el-col :span="18" :offset="1" v-if="type==1">
								<el-input placeholder="请输入登录密码" type="password" class="inputes" v-model="password">
								</el-input>
							</el-col>
							<el-col :span="18" :offset="1" v-else>
								<el-input placeholder="请输入验证码" class="inputes" v-model="code">
									<template slot="append" class="getcode">
										<span style="color: #398cdc;font-size: 110%;"
											@click="send_login_code()">{{send_login_txt}}</span>
									</template>
								</el-input>
							</el-col>
							<el-col :span="18" :offset="1">
								<el-row>
									<el-col :span="18">
										<el-input placeholder="图片验证码" v-model="inputCode" class="inputes"></el-input>
									</el-col>
									<el-col :span="6">
										<img v-if="requestCodeSuccess" :src="randCodeImage"
										class="col_img"
											@click="handleChangeCheckCode" />
										<img v-else src="../assets/login/checkcode.png"
										class="col_img" @click="handleChangeCheckCode" />
									</el-col>
								</el-row>
							</el-col>
						</el-row>
						<el-row class="remember">
							<el-col :offset="1" :span="12">
								<el-checkbox v-model="checked">一周内保持登录</el-checkbox>
							</el-col>
							<el-col :span="6" style="text-align: right;color: #999999;">
								<!-- <span @click="$http.show_msg()">创建/忘记密码?</span> -->
							</el-col>
						</el-row>
						<el-row class="loginBtn">
							<el-col :span="18" :offset="1">
								<el-button type="primary" @click="submit(1)">登录</el-button>
							</el-col>
						</el-row>
						<el-row class="loginRester">
							<el-col :span="18" :offset="1">
								<span @click="login_type='register'">
									立即注册
								</span>
							</el-col>
						</el-row>
						<el-row class="other">
							<el-col :span="18" :offset="1">
								其他方式登录
							</el-col>
						</el-row>
						<el-row class="icon">
							<el-col :span="2" :offset="1">
								<img src="../assets/login/wechat.png" @click="$http.show_msg()">
							</el-col>
							<el-col :span="5" :offset="1">
								<el-button type="primary" @click="$http.show_msg()">合作客户登录</el-button>
							</el-col>
							<el-col :span="4" :offset="1">
								<el-button type="warning" @click="$http.show_msg()">企业登录</el-button>
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="13" :offset="1" class="right" v-else>
						<el-row class="titleRow">
							<el-col :span="6" :offset="1">
								<el-row>
									<el-col :span="24" class="active">
										<span>账号注册</span>
									</el-col>
									<el-col :span="6" :offset="5" class="activeRow"></el-col>
								</el-row>
							</el-col>
						</el-row>
						<el-row class="inputs">
							<el-col :span="18" :offset="1">
								<el-input placeholder="请输入昵称" class="inputes" v-model="nickname"></el-input>
							</el-col>

							<el-col :span="18" :offset="1">
								<el-input placeholder="请输入手机号码" class="inputes" v-model="phone">
									<template slot="prepend">
										<span style="font-size: 130%;font-weight: bold;color: #000000;">中国+86</span>
									</template>
								</el-input>
							</el-col>
							<el-col :span="18" :offset="1">
								<el-input placeholder="请输入密码" type="password" class="inputes" v-model="password">>
								</el-input>
							</el-col>
							<el-col :span="18" :offset="1">
								<el-row>
									<el-col :span="18">
										<el-input placeholder="图片验证码" v-model="inputCode" class="inputes"></el-input>
									</el-col>
									<el-col :span="6">
										<img v-if="requestCodeSuccess" :src="randCodeImage"
										class="col_img"
											@click="handleChangeCheckCode" />
										<img v-else src="../assets/login/checkcode.png"
										class="col_img" @click="handleChangeCheckCode" />
									</el-col>
								</el-row>
							</el-col>
							<el-col :span="18" :offset="1">
								<el-input placeholder="请输入验证码" class="inputes" v-model="code">
									<template slot="append" class="getcode">
										<span style="color: #398cdc;font-size: 110%;"
											@click="send_register_code()">{{send_register_txt}}</span>
									</template>
								</el-input>
							</el-col>
						</el-row>
						<el-row class="loginBtn">
							<el-col :span="18" :offset="1">
								<el-button type="primary" @click="submit(2)">注册</el-button>
							</el-col>
						</el-row>
						<el-row class="loginRester">
							<el-col :span="18" :offset="1">
								<span @click="login_type='login'">
									已有帐号去登录
								</span>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				requestCodeSuccess: false,
				nickname: '',
				phone: '',
				code: '',
				password: '',
				inputCode: '',
				randCodeImage: null,
				currTime: null,
				checked: true,
				send_login_txt: '获取验证码',
				send_register_txt: '获取验证码',
				type: 0,
				login_type: 'login',
				url: {
					register: "/web/user/register",
					login: "/web/user/login",
					phoneLogin: "/web/user/phoneLogin",
					send: "/web/user/send",
					randomImage: "/sys/randomImage/"
				},
			}
		},
		created() {
			this.handleChangeCheckCode()
		},
		methods: {
			//注册
			async register() {
				let param = {
					nickname: this.nickname,
					username: this.phone,
					currTime: this.currTime,
					password: this.password,
					inputCode: this.inputCode,
					code: this.code
				}
				let res = await this.$http.post(this.url.register, param);
				return res.data
			},
			//登录
			async login() {
				let that = this
				let param = {}
				let res = null
				if (this.type == 1) {
					param.username = this.phone
					param.password = this.password
					param.currTime = this.currTime
					param.inputCode = this.inputCode
					res = await this.$http.post(this.url.login, param);
					return res.data
				} else {
					param.username = this.phone
					param.currTime = this.currTime
					param.password = this.password
					param.inputCode = this.inputCode
					param.code = this.code
					res = await this.$http.post(this.url.phoneLogin, param);
					return res.data
				}
			},
			//获取图片验证码
			async handleChangeCheckCode() {
				this.currTime = new Date().getTime();
				this.inputCode = ''
				let res = await this.$http.get(this.url.randomImage + this.currTime);
				if (res.data.success) {
					this.randCodeImage = res.data.result
					this.requestCodeSuccess = true
				} else {
					this.$message.error(res.data.message)
					this.requestCodeSuccess = false
				}
			},
			// 请求时async必须要加
			async submit(type) {
				// await和async对应异步请求
				// let res =await this.$http.get('');
				// let res =await this.$http.post('');
				if (type == 1) {
					let data = await this.login()
					if (data) {
						console.log(data)
						if (data.code == 200) {
							console.log(data.result)
							//token 放到请求头 如图所示
							//userId和username 可以放到本地浏览器存储
							// {token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MzI3OTc0MTAsInVzZXJuYW1lIjoiMTQzNzk1NzM1ODA3NDYyNjA1MCJ9.ofs_Nqrt-SHUB8mQqLe8rlPy0xXD_AYIy4T_KRoc-7g"
							//   userId: "1437957358074626050"
							//   username: "15638943013"}
							localStorage.setItem('token',data.result.token)
              let userInfo = {
                userId: data.result.userId,
                username: data.result.username,
                nickName: data.result.nickName
              }
							localStorage.setItem('userId',data.result.userId)
              localStorage.setItem('nickName',data.result.nickName)
              localStorage.setItem('username',data.result.username)
							this.$router.push({
								name: 'home'
							})
						} else {
							this.$message.error(data.message)
						}
					}
				} else {
					let data = await this.register()
					if (data.code == 200) {
						this.password = '',
							this.code = '',
							this.inputCode = '',
							this.phone = '',
							this.nickname = '',
							this.$message.success(data.message)
						this.randCodeImage()
						this.login_type = 'login'
					} else {
						this.$message.error(data.message)
					}
				}

			},
			//登录发送验证码接口
			async send_login_code() {
				let that = this;
				let num = 60;
				this.send(1)
				let timer = setInterval(() => {
					num--
					that.send_login_txt = `剩余(${num})秒`;
					if (num == 0) {
						clearInterval(timer);
						that.send_login_txt = '获取验证码';
					}
				}, 1000)
			},
			//注册发送验证码接口
			async send_register_code() {
				let that = this;
				let num = 120;
				this.send(2)
				let timer = setInterval(() => {
					num--
					that.send_register_txt = `剩余(${num})秒`;
					if (num == 0) {
						clearInterval(timer);
						that.send_register_txt = '获取验证码';
					}
				}, 1000)
			},
			async send(type) {
				let param = {
					username: this.phone,
					type: type
				}
				let res = await this.$http.post(this.url.send, param);
				if (res.data.code == 200) {
					this.$message.success(res.data.message)
				} else {
					this.$message.error(res.data.message)
				}
			}
		}
	}
</script>

<style lang="scss">

	.container {
		width: 100vw;
		height: 100vh;
		background-image: url(../assets/login/loginback.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.login {
		width: 115vh;
    height: 69vh;
		margin-top: 15vh;
		border-radius: 25px;
		background-color: #ffffff;
		letter-spacing: 2px;

		.left {
			height: 100%;
			border-radius: 25px 0 0 25px;
			background-image: url(../assets/login/loginxu.png);
			background-size: 100% 100%;
      width: 50vh;
      // height: 69vh;
      // background-size: cover;
      // -webkit-background-size: cover;
      // -o-background-size: cover;
			letter-spacing: 15px;
			font-family: '宋体';
			color: #ffffff;
			text-align: center;
			background-repeat: no-repeat;

			.logo {
				height: 10vh;
				margin-top: 10vh;
				text-align: center;

				img {
					height: 10vh;
				}
			}

			.title {
				margin-top: 3.5vh;
				font-size: 270%;
				font-weight: bold;
			}

			.address {
				margin-top: 1vh;
				letter-spacing: 5px;
				font-weight: bold;
			}

			.desction {
				margin-top: 8vh;
				font-size: 230%;
				font-family: '楷体';
				font-weight: bold;
				letter-spacing: 5px;

				.desc_left {
					text-align: right;
				}

				.back {
					span {
						display: inline-block;
						width: 1px;
						height: 20px;
						background-color: #c3c3c3;
						margin-left: calc((100% - 1px)/2);
					}
				}
			}

			.line {
				height: 1px;
				position: relative;

				&::after {
					content: '';
					width: 200%;
					height: 1px;
					position: absolute;
					top: 0;
					left: -50%;
					transform: scale(0.5);
					background-color: #ffffff;
				}
			}

			.top {
				margin-top: 2vh;
			}

			.english {
				letter-spacing: 2px;
				font-size: 21px;
				height: 40px;
				line-height: 40px;
				text-indent: 10px;
				color: #e5e5e5;
			}

			.bottom {
				&::after {
					left: -45%;
				}
			}

			.detail {
				letter-spacing: 4px;
				color: #d1d1d1;
				margin-top: 2vh;
				font-size: 16px;
			}
		}

		.right {
      width: 60vh;
			.titleRow {
				margin-top: 3vh;
				font-size: 21px;
				color: #999999;
			}

			.active {
				color: #398cdc;
				font-size: 25px;
				font-weight: bold;
			}

			.activeRow {
				height: 4px;
				border-radius: 2px;
				background-color: #398cdc;
				margin-top: 1vh;
			}

			.inputes {
				margin-top: 3vh;
				height: 5.5vh;
				background-color: #f5f5f5;

				input {
					height: 5.5vh;
					line-height: 5.5vh;
					font-size: 120%;
					background-color: #F5F7FA;
				}
			}
			.col_img{
				width: 100%;
				height: 4.5vh;
				margin-top: 3.5vh;
			}

			.remember {
				margin-top: 3vh;
			}

			.loginBtn {
				margin-top: 2vh;

				button {
					width: 100%;
					height: 5.5vh;
					font-size: 150%;
					font-weight: bold;
				}
			}

			.loginRester {
				margin-top: 3vh;
				text-align: center;
				color: #398cdc;

				span {
					text-decoration: underline;

					&:hover {
						cursor: pointer;
					}
				}
			}

			.other {
				margin-top: 3vh;
				color: #999999;
				font-size: 110%;
			}

			.icon {
				margin-top: 3vh;

				img {
					width: 50px;
					height: 50px;
				}

				button {
					width: 100%;
					margin-top: 7.5px;
					height: 35px;
					border-radius: 25px;
					font-size: 85%;
				}
			}
		}
	}

	span {
		&:hover {
			cursor: pointer;
		}
	}
</style>
